<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>el与data的两种写法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    data与el的2种写法
      1.el有2种写法
        (1)new Vue时候配置el属性
        (2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
      2.data有2种写法
        (1)对象式
        (2)函数式
        如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错
      3.一个重要的原则：
        由Vue管理的函数，一定不要写箭头函数，一但写了箭头函数，this就不再是Vue实例了
-->

<div id="root">
  <h1>你好,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false//阻止vue在启动时产生生产提示
  // el的两种写法
 /* const vm = new Vue({
    // el: "#root",  //第一种写法
    data: {
      name: '金串串'
    }
  })
  vm.$mount('#root') //第二种写法*/
  //   data的两种写法
  new Vue({
    el:'#root',
    //data的第一种写法：对象式
    /*data:{
      name:'金串串'
    }*/

    // data的第二种写法：函数式
    data(){
      return{
        name:'金串串'
      }
    }
  })

</script>
</html>